<template>
  <el-dialog title="修改检查起止时间" :visible.sync="show" :close-on-click-modal="false" append-to-body :show-close="!btnLoading" width="600px" @closed="$refs.form.resetFields()">
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-form-item prop="rltChkId" class="hide" />
      <el-form-item label="检查开始时间" prop="startTime">
        <el-date-picker v-model="form.startTime" type="date" placeholder="选择时间" value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%" />
      </el-form-item>
      <el-form-item label="检查结束时间" prop="latestTime">
        <el-date-picker v-model="form.latestTime" type="date" placeholder="选择时间" value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%" />
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button type="primary" :loading="btnLoading" @click="btnSubmit">确 定</el-button>
      <el-button :disabled="btnLoading" @click="show = false">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
// 修改检查项起止时间
import { editFormMixin } from '@/utils/mixin'
import { editRltChkitem } from '@/api/cqPe/peRecord'
export default {
  mixins: [editFormMixin],
  data() {
    return {
      primaryKey: 'rltChkId',
      updateApi: editRltChkitem,
      form: {
        rltChkId: '',
        startTime: '',
        latestTime: ''
      },
      rules: {
        startTime: [
          { required: true, message: '请选择检查开始时间' },
          {
            validator: (rule, val, cb) => {
              const eTime = this.form.latestTime
              eTime && this.$refs.form.validateField('latestTime')
              cb()
            }
          }
        ],
        latestTime: [
          {
            validator: (rule, val, cb) => {
              // null 设为空字符串
              if (val === null) this.form.latestTime = ''
              const sTime = this.form.startTime
              // 结束时间选填
              if (!val || !sTime) return cb()
              if (new Date(val) < new Date(sTime)) return cb('结束时间不能小于开始时间')
              cb()
            }
          }
        ]
      }
    }
  }
}
</script>
